<template>
    <div>
        <div class="title-wrapper">
            <div class="title">
                <span class="back" @click="back">
                    <Icon type="ios-arrow-back" size="22"/>
                    <span>返回</span>
                </span>
                <div>
                    <Select v-model="courseId"
                            style="width:200px"
                            @on-change="changeCourse"
                    >
                        <Option v-for="item in courseList"
                                :value="item.id"
                                :key="item.id">
                            {{item.id}} {{item.name}} {{item.teacher}}
                        </Option>
                    </Select>
                </div>
                <Button class="down" type="primary" @click="exportDate">导出excel</Button>
            </div>
        </div>
        <div>
            <Table border :columns="columns" :data="tableData" class="table-wrapper" ref="table"></Table>
        </div>
    </div>
</template>

<script>
    import {getCourseByDay, getStatistics} from '../../request/api'

    export default {
        name: "Record",
        data() {
            return {
                course: this.$route.query,
                courseId: this.$route.query.id,
                columns: [],
                tableData: [],
                courseList: [
                    {
                        id: 1,
                        name: '数学',
                        teacher: '张三'
                    }
                ]
            }
        },
        created() {
            this.getCourseList();
            this.getRecord();
        },
        methods: {
            exportDate() {
                this.$refs.table.exportCsv({
                    filename: this.course.teacher + this.course.name +
                        new Date().getFullYear() + (new Date().getMonth() + 1) + new Date().getDate(),

                });
            },
            back() {
                this.$router.back(-1);
            },
            getCourseList() {
                getCourseByDay(
                    new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate(),
                ).then((res) => {
                    if (res.code == 200) {
                        this.courseList = res.data;
                    }
                })
            },
            getRecord() {
                getStatistics({
                        courseId: this.courseId,
                        day: new Date().getFullYear() + '-' + (new Date().getMonth() + 1) + '-' + new Date().getDate(),
                    }
                ).then((res) => {
                        if (res.code == 200) {
                            this.columns = res.data.columns;
                            for (let i = 0; i < this.columns.length; i++) {
                                this.columns[i].align = 'center';
                                this.columns[i].minWidth = 100;
                                this.columns[i].render = (h, params) => {
                                    console.log("params", params);
                                    if (params.row[this.columns[i].key].indexOf("：") == -1) {
                                        return h('span', {
                                            style: {
                                                color: 'green'
                                            }
                                        }, params.row[this.columns[i].key]);
                                    } else {
                                        return h('span', {
                                            style: {
                                                color: 'red'
                                            }
                                        }, params.row[this.columns[i].key]);
                                    }
                                }
                            }
                        }
                        this.tableData = res.data.tableData;
                    }
                )
            },
            changeCourse() {
                this.getRecord();
            }
        }
    }
</script>

<style scoped>
    .title {
        display: flex;
        align-items: center;
        height: 46px;
        justify-content: space-between;
    }

    .down {
        float: right;
    }

    .table-wrapper {
        overflow-x: scroll;
        overflow-y: hidden;
        white-space: nowrap; /* ul中的内容不换行 */
    }

    .back {
        color: blue;
        margin-right: 30px;
    }
</style>
